<template>
  <div>
    <div class="flex">
      <div class="title">一般资料</div>
    <el-form
      :model="bridgeCardBasicInfo"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
        style="width:90%"
    >
      <el-form-item label="管理单位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.manageUnit" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="养护单位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.maintainUnit" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="建设单位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.buildUnit" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="设计单位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.designUnit" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="监理单位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.supervisingUnit" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="施工单位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.constructionUnit" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="建成年月:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.buildDate" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="总造价:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.totalCost" size="small" clearable></el-input>
       </el-form-item>
      <el-form-item label="养护类别:" size="small">
        <el-select v-model="bridgeCardBasicInfo.maintainType" placeholder="请选择" @change="changeMaintenanceType">
          <el-option v-for="(item,index) in mainList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="养护等级:" size="small">
        <el-select v-model="bridgeCardBasicInfo.maintainLevel" placeholder="请选择">
          <el-option v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="道路等级:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.roadLevel" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="结构类型:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.StructType" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="设计荷载:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.designLoad" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="限载标准:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.limitLoadStandard" size="small" clearable></el-input>
       </el-form-item>
      <el-form-item label="抗震烈度:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.seismicFortificationIntensity" size="small" clearable></el-input>
       </el-form-item>
      <el-form-item label="正斜交角:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.angle" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="桥梁跨数:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.bridgeSpanNumber" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="跨径组合:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.spanGroup" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="桥面面积:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.bridgeDeckArea" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="桥梁总长:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.bridgeLength" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="桥梁总宽:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.bridgeWidth" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="车行道净宽:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.roadwayClearWidth" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="人行道净宽:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.sidewayClearWidth" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="河道等级:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.riverwayLevel" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="最高水位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.waxWaterLevel" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="常水位:" size="small">
        <el-input v-model.trim="bridgeCardBasicInfo.waterLevel" size="small" clearable></el-input>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bridgeCardBasicInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      mainList: [
        {
            label:'Ⅰ类养护',
            value:'0'
        },
        {
            label:'Ⅱ类养护',
            value:'1'
        },
        {
            label:'Ⅲ类养护',
            value:'2'
        },
        {
            label:'Ⅳ类养护',
            value:'3'
        },
        {
            label:'Ⅴ类养护',
            value:'4'
        }
      ],
      typeList: [],
      typeList1: [
        {
            value: '0',
            label: '合格级'
        },
        {
            value: '1',
            label: '不合格级'
        },
      ],
      typeList2:[
        {
            value: '0',
            label: 'A级'
        },
        {
            value: '1',
            label: 'B级'
        },
        {
            value: '2',
            label: 'C级'
        },
        {
            value: '3',
            label: 'D级'
        },
        {
            value: '4',
            label: 'E级'
        }
      ],
    };
  },
  watch:{
    'bridgeCardBasicInfo':{
      handler(val,old) {
        if(val.maintainType) {
          this.changeMaintenanceType(val.maintainType)
        }
      }
    }
  },
  methods: {
    queryBridgeCard() {
      let data = {
        ownId: this.ownId,
        cardId: this.cardId
      }
      this.$api.bridge.queryBridgeCard(data).then(res => {
        if(res.data.success) {
          let data = res.data.data[0]
          this.bridgeCardBasicInfo = data[0].bridgeCardBasicInfo
        }
      })
    },
     //养护类型
    changeMaintenanceType(val) {
        this.bridgeCardBasicInfo.maintenanceLevel = ''
        if(val === '0') {
            this.typeList = this.typeList1
        } else {
            this.typeList = this.typeList2
        }
    },
    emit(){
      return this.bridgeCardBasicInfo
    },  
  }
};
</script>
<style scoped>
.title {
  font-size: 20px;
  font-weight: 500;
}
.el-form{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
    .el-form-item--small.el-form-item {
    margin-bottom: 12px;
}
</style>